<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本css属性</title>
</head>
<style>
    /* text-decoration 用于设置文字的装饰线 */
    .box{
        line-height: 50px;
        text-decoration: none; 
    }
    /* 上划线 */
    .baidu{
        text-decoration: overline; 
    }
    /* 下划线 */
    .google{
        text-decoration: underline;
    }
    /* 中划线 */
    .biying{
        text-decoration: line-through;
    }
    /* text-transform  用于设置文字的大小写转换  (应用上JS转化的比较多)
    口 capitalize:(使...首字母大写资本化的意思)将每个单词的首字符变为大写
    口 uppercase:(大写字母)将每个单词的所有字符变为大写
    口 lowercase:(小写字母)将每个单词的所有字符变为小写
    口 none: 没有任何影响
    */

    .name{
        text-transform: capitalize;
    }
/* text-indent 缩进  2em正好是两个汉字的宽度*/
    .indent{
        text-indent: 2em;
    }
    /* text-align  设置文本的对齐方式  图片也可以对齐 只对行内级有用， 块级无效。
    口 left: 左对齐
    口right: 右对齐
    口 center: 正中间显示
    口justify: 两端对齐
    text-align-last: justify; 最后一行两端对齐
    */
    .align{
        text-align: center;
    }
    .box2{
        background-color: red;
        height: 300px;
        text-align: center;
    }
    .content{
        /* display: inline-block; */
        margin: 0 auto;
        background-color: green;
        height: 200px;
        width: 200px;
    }
    .box3{
        width: 200px;
        background-color: rgb(43, 255, 0);
        color: white;
        text-align: justify;
        text-align-last: justify;
    }
    .box4{
        /* letter-spacing: 10px;  字母之间间隔*/
        word-spacing: 10px;
    }
</style>
<body>
    <div class="box">
       <h3> 某一天，你我暮年，静坐庭前，观花开，赏花落，笑谈浮生流年。百年一眼，相对一笑，姹紫嫣红早已看遍。</h3>
    </div>
    <!-- text-decoration start -->
    <span class="baidu">百度一下</span>
    <!-- 装饰线其他的值 -->
    <span class="google">google一下</span>

    <span class="biying">必应一下</span>
    <!-- text-decoration end -->
    <!-- text-transform start -->
    <div class="name">my name is inzv</div>
    <!-- text-transform end -->
    <!-- text-indent start -->
    <div class="indent">my name is inzv</div>
    <!-- text-indent end -->
    <!-- text-align start -->
    <div class="align">my name is inzv</div>
    <!-- 图片元素可以居中 -->
    <!-- 块级元素不可以居中 -->
    <div class="box2">
        <div class="content"></div>
    </div>
    <div class="box3">
        某一天，你我暮年，静坐庭前，观花开，赏花落，笑谈浮生流年。百年一眼，相对一笑，姹紫嫣红早已看遍。某一天，你我暮年，静坐庭前，观花开，赏花落，笑谈浮生流年。百年一眼，相对一笑，姹紫嫣红早已看遍。
    </div>
    <!-- text-align end -->
    <!-- letter-spacing start -->
    <div class="box4">
        my name is inzv.
    </div>
    <!-- letter-spacing end -->
</body>
</html>